<template>
  <div class="f-fc marginB12">
    <p class="font18 marginR8">{{ $t("key128") }}:</p>
    <input
      class="searchInput width_250"
      id="tipinput"
      :placeholder="$t('key1036')"
      v-model="keyword"
    />
  </div>
  <div id="container" style="width: 100%; height: 560px"></div>
</template>

<script lang="ts" setup>
// import Layer from "@/components/layer/index.vue";
import { ref, onMounted, defineEmits, watch, reactive } from "vue";

const emit = defineEmits(["getLocation"]);
// import { ElMessage, ElMessageBox } from "element-plus";
// import service from "@/utils/system/request";
// import uploadImage from "@/components/uploadImage/indexV2.vue";
// const emit = defineEmits(["submitSeniorFn"]);
const props = defineProps(["getLng", "getLat"]);

import AMapLoader from "@amap/amap-jsapi-loader";

const keyword = ref();
// const map = shallowRef(null);
const path = ref([]);
const getLng = props.getLng; // 点击的纬度
const getLat = props.getLat; // 点击的经度
console.log(getLng, getLat, "122222222222222");
const lnglat = ref([]); // 点击的经度
const current_position = ref([]);
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "2c4a504d2cec5f1777463a04d1a784fc"
  };
  AMapLoader.load({
    key: "395e997045262811af939fbc78fcf4ec", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.InfoWindow",
      "AMap.ToolBar",
      "AMap.Scale",
      "AMap.PlaceSearch",
      "AMap.Geocoder",
      "AMap.Autocomplete"
    ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then(AMap => {
    const map = new AMap.Map("container", {
      //设置地图容器id
      resizeEnable: true,
      viewMode: "3D", //是否为3D地图模式
      zoom: 13, //初始化地图级别
      center: [114.06455, 22.54846] //初始化地图中心点位置
    });
    // 添加插件
    AMap.plugin(
      [
        // "AMap.ToolBar",
        // "AMap.Scale",
        // "AMap.HawkEye",
        // "AMap.Geolocation",
        // "AMap.MapType",
        // "AMap.MouseTool",
        // "AMap.Autocomplete"
      ],
      function () {
        //异步同时加载多个插件
        // 添加地图插件
        // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
        // map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
        // map.addControl(new AMap.HawkEye()); // 显示缩略图
        // map.addControl(new AMap.Geolocation()); // 定位当前位置
        // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
      }
    );
    // 单击
    // map.on("click", e => {});
    // console.log(getLng, getLat);
    // debugger;
    if (getLng) {
      var marker = new AMap.Marker({
        // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
        // position: [114.06455, 22.54846]
        icon: "http:////a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        // position: [getLng, getLat],
        position: [getLng, getLat],
        offset: new AMap.Pixel(-13, -30),
        draggable: true,
        cursor: "move",
        raiseOnDrag: true
      });

      map.add(marker);
      map.setFitView();
    }

    map.on("click", e => {
      // 点击地图添加标注点
      regeoCode(e.lnglat.getLng(), e.lnglat.getLat());
      // console.log("111");
    });
    let infoWindow = new AMap.InfoWindow({
      autoMove: true,
      offset: new AMap.Pixel(10, -38)
    });
    //输入提示
    var autoOptions = {
      input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
      map: map
    }); //构造地点查询类
    AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
    AMap.event.addListener(placeSearch, "markerClick", e => {
      // 点击标注
      console.log("122222222");
    });

    function select(e) {
      console.log(e, "7987");
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name); //关键字查询查询
    }

    let geocoder;

    function regeoCode(getLng, getLat) {
      if (!geocoder) {
        geocoder = new AMap.Geocoder({
          // city: '010', //城市设为北京，默认：“全国”
          radius: 1000 // 范围，默认：500
        });
      }
      lnglat.value = [getLng, getLat];
      if (!marker) {
        marker = new AMap.Marker({
          icon: "http:////a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
          position: [getLng, getLat],
          offset: new AMap.Pixel(-13, -30),
          draggable: true,
          cursor: "move",
          raiseOnDrag: true
        });
        map.add(marker);
      }
      marker.setPosition(lnglat.value);
      map.setCenter(marker.getPosition());
      // AMap.event.addListener(marker, "dragend", function (e) {
      //   lnglat.value = marker.getPosition();
      //   geocoder.getAddress(lnglat.value, function (status, result) {
      //     debugger;
      //     console.log(status === "complete", result.regeocode);
      //     if (status === "complete" && result.regeocode) {
      //       console.log(result.regeocode.addressComponent);
      //       let address = result.regeocode.formattedAddress;
      //       let citycode = result.regeocode.addressComponent.citycode;
      //       let value = {
      //         address: address,
      //         province: result.regeocode.addressComponent.province,
      //         city: result.regeocode.addressComponent.city,
      //         dist: result.regeocode.addressComponent.district
      //       };
      //       // vm.keyword = address;
      //       // vm.address = value;
      //       // infoWindow.setContent(createContent(address, vm.lnglat, citycode));
      //       // infoWindow.open(map, marker.getPosition());
      //       // vm.$emit("getLocation", value, vm.lnglat);
      //     } else {
      //       console.log("111");
      //     }
      //   });
      // });
      geocoder.getAddress(lnglat.value, function (status, result) {
        if (status === "complete" && result.regeocode) {
          let address = result.regeocode.formattedAddress;
          let citycode = result.regeocode.addressComponent.citycode;
          let value = {
            address: address,
            province: result.regeocode.addressComponent.province,
            city: result.regeocode.addressComponent.city,
            dist: result.regeocode.addressComponent.district
          };
          console.log(address);
          emit("getLocation", address, lnglat.value);
          // vm.keyword = address;
          // vm.address = value;
          infoWindow.setContent(createContent(address, lnglat.value, citycode));
          infoWindow.open(map, marker.getPosition());
          // vm.$emit("getLocation", value, vm.lnglat);
        }
      });
    }

    function createContent(address, lnglat, citycode) {
      // 信息窗体内容
      let s = [];
      s.push(`<b>经纬度：${lnglat}</b>`);
      s.push(`地址：${address}`);
      s.push(`区号：${citycode}`);
      return s.join("<br>");
    }
  });
};

initMap();
</script>

<style lang="scss" scoped>
.searchInput {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  border: 2px solid #d0d0d0;
}

.amap-sug-result {
  z-index: 9999;
  padding: 12px 0;
  border-radius: 8px;

  .auto-item {
    padding: 10px 12px;
  }
}
</style>
